<template>
  <div class="md-forget-dialog">
    <el-dialog title="Forget" width="500px" :visible.sync="dialogFlag" append-to-body :close-on-click-modal="false" :close-on-press-escape="false" @close="handleClose" center>
      <el-form style="margin-top: -20px" ref="forgetForm" :model="forgetForm" :rules="rules">
        <el-form-item prop="email" label="Your Email Address:">
          <el-input v-model="forgetForm.email" placeholder="Please input email address">
            <el-button slot="append" @click="sendEmail" :loading="btnLoading" title="send email code">Send</el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="code" label="Validate Code">
          <el-input v-model="forgetForm.code" maxlength="6" placeholder="Please input email code"></el-input>
        </el-form-item>
        <el-form-item prop="userPwd" label="Password:">
          <el-input type="password" v-model="forgetForm.userPwd" class="w-300" placeholder="Please input password" show-password prefix-icon="el-icon-lock" />
        </el-form-item>
        <el-form-item prop="resPwd" label="Password Confirm">
          <el-input v-model="forgetForm.resPwd" type="password" placeholder="Confirm Password" />
        </el-form-item>
        <el-form-item>
          <div class="btn-box">
            <el-button type="primary" style="width: 170px;" @click="handleForget()">OK</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'MDForgetDialogComponent',
  props: {
    flag: {
      type: Boolean,
      default: false
    }
  },
  data () {
    const validateEMail = (rule, value, callback) => {
      const reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
      if (value === '') {
        callback(new Error('This field is required!'))
      } else if (!reg.test(value)) {
        callback(new Error('Email invalid'))
      } else {
        callback()
      }
    }
    return {
      btnLoading: false,
      dialogFlag: false,
      forgetForm: {
        email: '',
        code: '',
        userPwd: '',
        resPwd: ''
      },
      codeUuid: '',
      rules: {
        email: [{ required: true, validator: validateEMail, trigger: 'blur' }],
        code: [{ required: true, message: 'Please input code', trigger: 'blur' }],
        userPwd: [
          { required: true, message: 'Password length: 8 to 16 characters!(A-Z+a-z+0-9)', trigger: 'blur' },
          { min: 8, max: 16, message: 'Password length: 8 to 16 characters!(A-Z+a-z+0-9)', trigger: 'blur' }
        ],
        resPwd: [
          { required: true, message: 'Password length: 8 to 16 characters!(A-Z+a-z+0-9)', trigger: 'blur' },
          { min: 8, max: 16, message: 'Password length: 8 to 16 characters!(A-Z+a-z+0-9)', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (this.forgetForm.userPwd !== value) {
                callback('Two passwords do not match!')
              }
              callback()
            }, trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    flag: {
      handler (val) {
        this.dialogFlag = val
      }
    }
  },
  methods: {
    handleClose () {
      this.$refs.forgetForm.resetFields()
      this.$nextTick(() => {
        this.dialogFlag = false
        this.$emit('close')
      })
    },
    async sendEmail () {
      if (!this.forgetForm.email) {
        this.$message.error('Please input email address!')
        return
      }
      this.btnLoading = true
      const params = {
        email: this.forgetForm.email
      }
      const res = await this.$axios.post('web/user/sendEmailVerificationCode', params)
      this.btnLoading = false
      if (res.code == 200) {
        this.$message.success('Send Success!')
        this.codeUuid = res.data?.uuid || ''
      }
    },
    handleForget () {
      this.$refs.forgetForm.validate(async valid => {
        if (!valid) {
          return
        }
        const params = {
          email: this.forgetForm.email,
          userPwd: this.forgetForm.userPwd,
          code: this.forgetForm.code,
          codeUuid: this.codeUuid,
          loginMode: '2' // 注册方式 1用户名 2邮箱 3手机号
        }

        const res = await this.$axios.post('web/user/forgetPwd', params)
        if (res.code == 200) {
          this.$message.success('Success!')
          this.handleClose()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: -10px;
  .register {
    width: 100%;
    position: absolute;
    right: 0;
    top: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    span, a {
      cursor: pointer;
      color: $md-primary-color;
    }
  }
}
</style>
